<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5布局Demo</title>
    <link rel="stylesheet" type="text/css" href="../css/h5demo.css">
    <!-- Tile 前面的图标 -->
    <link rel="icon" href="../image/h5/favicon.png">
</head>
<body>
<!-- 头部 -->
<header>
    <div class="container">
        <a href="#">
            <img src="../image/h5/logo.png" alt="logo pic">
        </a>
        <!-- 导航链接 -->
        <nav>
            <a class="active" href="#">Home</a>
            <a href="#">Course</a>
            <a href="#">Actual</a>
            <a href="#">Plan</a>
            <a href="#">FAQ</a>
            <a href="#">Notes</a>
        </nav>
    </div>
</header>
<!-- 定义一个区域 -->
<section class="banner">
    <ul>
        <li class="active"><img src="../image/h5/banner/banner1.jpg" alt=""></li>
        <li class="left"><img src="../image/h5/banner/banner3.jpg" alt=""></li>
        <li class="right"><img src="../image/h5/banner/banner2.jpg" alt=""></li>
    </ul>
</section>
<!-- 定义一个区域 -->
<section class="main">
    <!-- aside定义侧边栏 -->
    <aside>
        <h1>Recent <samp>Course</samp></h1>
        <dl>
            <dt>Hyper Text Markup Language</dt>
            <dd><img src="../image/h5/Course/05_05.png" alt="course"></dd>
            <dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites. </dd>
        </dl>
        <dl>
            <dt>Cascading Style Sheets</dt>
            <dd><img src="../image/h5/Course/06_04.png" alt="course"></dd>
            <dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. </dd>
        </dl>
        <dl>
            <dt>JavaScript</dt>
            <dd><img src="../image/h5/Course/09_07.png" alt="course"></dd>
            <dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
        </dl>
        <dl>
            <dt>AngularJS</dt>
            <!--            <dd><img src="images/Course/02_09.png" alt="course"></dd>-->
            <dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and... </dd>
        </dl>
    </aside>
    <!-- 定义独立内容 -->
    <article>
        <h1>Welcome to <samp>Massive Open Online Course!</samp></h1>
        <p>We provide the latest knowledge to help you cope with the changing world!</p>
        <img src="../image/h5/article.jpg" alt="course">
        <p>We hope that all the students who love the Internet can be more convenient access to learning resources,
            using the Internet thinking to change our learning.</p>
        <p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's
            MOOC. We are free, we only teach useful, we concentrate on education.</p>
    </article>
</section>
<!-- 定义页脚 -->
<footer>
    <div class="container">
        <p>Copyright © 2016 imooc.com All Rights Reserved.</p>
        <span>
			<img src="../image/h5/icon/weichat.png" alt="weiChat">
			<img src="../image/h5/icon/sina.png" alt="sina">
			<img src="../image/h5/icon/qq.png" alt="qq">
		</span>
    </div>
</footer>
</body>
</html>